<template>
	<div>
		<div class="wy_filter">
			<el-input v-model="query.name" placeholder="请输入要查询商品名"></el-input>
			<el-button type="primary" plain icon="el-icon-search" @click="search">查询</el-button>
			<el-button type="primary" plain icon="el-icon-plus" style="float: right;" @click="add"></el-button>
			<div class="clear"></div>
		</div>

		<el-table 
			:data="tableData.records"
			border>
			<el-table-column label="编号" prop="id"></el-table-column>
			<el-table-column label="商品名" prop="name"></el-table-column>
			<el-table-column label="标准价格" prop="price"></el-table-column>
		    <el-table-column label="品牌" >
			  <template slot-scope="scope">
				  <template v-for="item in form.brand.records">
					  <span v-if="item.id === scope.row.brandId">{{item.name}}</span>
				  </template>
			  </template>
		    </el-table-column>			
			<el-table-column label="分类" >
			  <template slot-scope="scope">
				  <template v-for="item in categoryIdCut(scope.row.categoryId)">
					  <span >{{item}}</span>
				  </template>
			  </template>
			</el-table-column>		
			<el-table-column label="关键词" prop="keywords"></el-table-column>
<!-- 			<el-table-column label="上架状态" prop="price"></el-table-column> :formatter="getBrandName":formatter="getCategorName"-->
			<el-table-column label="是否有效" prop="active"></el-table-column>
			<el-table-column label="图片 ">
				<template slot-scope="scope">
					<el-image
						style="width: 80px; height: 80px"
						:src="img(scope.row.img)"
						fit="contain"></el-image>
				</template>
			</el-table-column>
			<el-table-column width="150px">
				<template slot-scope="scope">
					<template v-if="scope.row.publishStatus === 1">
					<el-button type="primary" plain @click="update(scope.row.id,scope.row.brandId)" size="mini">修改</el-button>
					<el-button type="danger" plain @click="off(scope.row.id,0)" size="mini">下架</el-button>
					</template>
					<template v-else>
						<el-button type="danger" plain @click="off(scope.row.id,1)" size="mini">重新上架</el-button>
					</template>
				</template>
				
			</el-table-column>
			<el-table-column width="150px">
				<template slot-scope="scope">
					<template v-if="scope.row.active === 1">
					<el-button type="danger" plain @click="del(scope.row.id,0)" size="mini" align="center">删除</el-button>
					</template>
					<template v-else>
						<el-button type="danger" plain @click="del(scope.row.id,1)" size="mini">恢复到有效</el-button>
					</template>
				</template>
				
			</el-table-column>
		</el-table>
		<el-pagination
			background
			:current-page.sync="query.pageNo"
			layout="prev, pager, next"
			:page-count="tableData.pages"
			@current-change="getTableData">
		</el-pagination>
		<el-dialog 
			width="750px"
			:title="userDialog.title" 
			:visible.sync="userDialog.show"
			:close-on-click-modal="false">
			<component 
				v-if="userDialog.show"
				:is="userDialog.component"
				:show.sync="userDialog.show"
				:id="userDialog.id"
				:brandName="userDialog.brandName"
				:brandId="userDialog.brandId"
				:categoryId="query.categoryId"
				@getTableData="getTableData"></component>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'ProductList',
		data() {
			const module = '/pms-product'
			return {
				aname:"666",
				tableData: [],
				url:{
					list: module + '/list',
					del: module +'/del',
					off: module +'/off',
					getBrandName:module+'/getBrandName',
					getCategorName:module+'/getCategorName',
				},
				query: {
					pageNo: 1,
					pageSize: 5,
					name:''
				},
				userDialog: {
					show: false,
					title: '',
					component: () => import('./add'),
					id: null,
					brandId:null
				},form:{
					brand:[]
				}
			}
		},
		created() {
			this.query.categoryId = parseInt(this.$route.query.categoryId) 
			//console.log(this.query.categoryId)
			this.getTableData()
		},
		methods: {
			getTableData() {
				this.get(this.url.list,this.query, response => {
					this.tableData = response.product
					this.form.brand = response.brand
					
				})
			},
			add() {
				this.userDialog.id = null
				this.userDialog.show = true
				this.userDialog.title = '添加商品'
			},
			update(id,brandId) {
				// for(let i=0;i<(this.form.brand.records).length-1;i++){
				// 	//console.log((this.form.brand.records)[i].name)
				// 	if((this.form.brand.records)[i].id==scope.row.brandId){
						
				// 		this.userDialog.brandName=(this.form.brand.records)[i].name
				// 		//console.log(this.userDialog.brandName)
				// 	}
				// }
				this.userDialog.brandId=brandId
				this.userDialog.id = id
				this.userDialog.show = true
				this.userDialog.title = '修改'
			},
			del(id,active) {
				const txt = active === 0 ? '确定真的要删除该数据吗?' : '确定真的要将数据恢复到有效吗?'
				this.$confirm(txt,'提示',{type: 'warning'}).then(()=>{
					this.post(this.url.del,{id: id, active: active}, () => {
						this.getTableData()
						//this.query.pageNo=1
					})
				})
			},
			off(id,publishStatus) {
				const txt = publishStatus === 0 ? '确定要下架商品么吗?' : '确定要上架商品么吗?'
				this.$confirm(txt,'提示',{type: 'warning'}).then(()=>{
					this.post(this.url.off,{id: id, publishStatus: publishStatus}, () => {
						this.getTableData()
					})
				})
			},
			search(){
				this.query.pageNo = 1
				this.getTableData()
			},
			users(roleId) {
				this.$router.push({
					path: '/roleusers',
					query: {
						roleId: roleId
					}
				})
			},
			resources(roleId) {
				this.$router.push({
					path: '/roleresource',
					query: {
						roleId: roleId
					}
				})
			},     
			categoryIdCut(id){
			let company=id.split(",")
			// for(let i= company.length-1;i>0;i--){
			// 	if(company[i]==","){
			// 		console.log(233)
			// 	}
			// }
			
			return company[company.length-1]
			},
			

		}
	}
</script>

<style>
</style>
